<template>
  <el-dialog
    :title="'重置密码'"
    :close-on-click-modal="false"
    v-model="isShow"
    width="800px"
    @close="close"
  >
    <el-form ref="rulesForm" :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
          <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
          <el-form-item label="执行时间：">{{ timeFormat(form.createTime) }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="执行状态：">
            <div v-if="form.status == 0">正常</div>
            <div v-else-if="form.status == 1">失败</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="异常信息：" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import { toRefs, reactive, ref, computed, watch, defineComponent } from 'vue'
import { useStore } from 'vuex'
import dialog from '@/mixins/dialog'
import { timeFormat } from '@/filters'
import { StateType as LogStateType, JobLog } from '@/store/modules/monitor/taskLog'

interface DataType {
  form: JobLog;
}

export default defineComponent({
  name: 'UpdatePwd',
  emits: ['onRefresh', 'close'], // this line
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const store = useStore<{taskLog: LogStateType}>()
    const { dialogM } = dialog(props, context)
    const data = reactive<DataType>({
      form: {
        jobLogId: null,
        jobName: '',
        jobGroup: '',
        invokeTarget: '',
        jobMessage: '',
        status: '',
        exceptionInfo: '',
        startTime: null,
        stopTime: null,
        createTime: null
      }
    })
    const rulesForm = ref(null)
    const logData = computed<JobLog>(() => {
      return store.state.taskLog.data
    })
    const getInfo = () => {
      store.dispatch('taskLog/getInfo', logData.value.jobLogId).then(res => {
        data.form = res.data
      })
    }
    watch(() => props.value, (val) => {
      if (!val) {
        data.form = {
          jobLogId: null,
          jobName: '',
          jobGroup: '',
          invokeTarget: '',
          jobMessage: '',
          status: '',
          exceptionInfo: '',
          startTime: null,
          stopTime: null,
          createTime: null
        }
      } else {
        getInfo()
      }
    })
    return {
      ...toRefs(data),
      ...toRefs(dialogM),
      rulesForm,
      timeFormat
    }
  }
})
</script>
